import { patient_evaluation_info } from '@/services/patient';
import { ProDescriptions } from '@ant-design/pro-components';
import { Divider, Modal, Radio, Spin, Typography } from 'antd';
import { useEffect, useState } from 'react';
import './capacity.less';
const { Title } = Typography;
interface Iprops {
  isShowCapacityOnline: (show: boolean) => void;
  onlineCapacityModalOpen: boolean;
  onlineId: number | undefined;
}
const OnlineCapacityInfo = (props: Iprops) => {
  const { isShowCapacityOnline, onlineCapacityModalOpen, onlineId } = props;
  // 存储评估详情
  const [capacityInfo, setCapacityInfo] = useState<any>(undefined);
  // 评估内容
  const [content, setcontent] = useState<any>(undefined);
  // 页面初始化
  useEffect(() => {
    // 获取能力评估详情
    const getData = async () => {
      if (onlineId) {
        let res: any = await patient_evaluation_info({ id: onlineId });
        console.log('能力评估详情', res);
        if (res.code == 200) {
          setCapacityInfo(res.data);
          console.log('能力', res.data.content, JSON.parse(res.data.content));
          setcontent(JSON.parse(res.data.content));
        }
      }
    };
    getData();
  }, []);

  // 评估详情
  const get_oldinfo = async () => {
    return {
      data: capacityInfo,
    };
  };
  return (
    <Modal
      title="能力评估详情"
      open={onlineCapacityModalOpen}
      onCancel={() => isShowCapacityOnline(false)}
      footer={null}
      width={1500}
    >
      <Divider />
      <Typography>
        {/* 评估详情 */}
        {capacityInfo === undefined ? (
          <div
            style={{
              margin: '20px 0',
              marginBottom: '20px',
              padding: '30px 50px',
              textAlign: 'center',
            }}
          >
            <Spin size="large" />
          </div>
        ) : (
          <>
            <ProDescriptions
              column={3}
              request={async (params) => get_oldinfo()}
              columns={[
                {
                  title: '评估时间',
                  key: 'create_time',
                  dataIndex: 'create_time',
                },
                {
                  title: '评估驿站',
                  key: 'poststation_name',
                  dataIndex: 'poststation_name',
                },
                {
                  title: '评估结果',
                  key: 'results',
                  dataIndex: 'results',
                },
              ]}
            ></ProDescriptions>
            <Title level={5}>基本能力评估</Title>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              <div className="question_item">
                <div className="question_title">认知功能</div>
                <div className="question_answer">
                  <Radio.Group value={content?.cognitive_function}>
                    <Radio value={'1'} key={1}>
                      基本正常
                    </Radio>
                    <Radio value={'2'} key={2}>
                      轻度异常
                    </Radio>
                    <Radio value={'3'} key={3}>
                      中度异常
                    </Radio>
                    <Radio value={'4'} key={4}>
                      重度异常
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">精神状态</div>
                <div className="question_answer">
                  <Radio.Group value={content?.mentality}>
                    <Radio value={'1'} key={1}>
                      基本正常
                    </Radio>
                    <Radio value={'2'} key={2}>
                      轻度异常
                    </Radio>
                    <Radio value={'3'} key={3}>
                      中度异常
                    </Radio>
                    <Radio value={'4'} key={4}>
                      重度异常
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">意识水平</div>
                <div className="question_answer">
                  <Radio.Group value={content?.consciousness}>
                    <Radio value={'1'} key={1}>
                      基本正常
                    </Radio>
                    <Radio value={'2'} key={2}>
                      轻度异常
                    </Radio>
                    <Radio value={'3'} key={3}>
                      中度异常
                    </Radio>
                    <Radio value={'4'} key={4}>
                      重度异常
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">沟通能力</div>
                <div className="question_answer">
                  <Radio.Group value={content?.communication}>
                    <Radio value={'1'} key={1}>
                      基本正常
                    </Radio>
                    <Radio value={'2'} key={2}>
                      轻度异常
                    </Radio>
                    <Radio value={'3'} key={3}>
                      中度异常
                    </Radio>
                    <Radio value={'4'} key={4}>
                      重度异常
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">听力</div>
                <div className="question_answer">
                  <Radio.Group value={content?.hearing}>
                    <Radio value={'1'} key={1}>
                      基本正常
                    </Radio>
                    <Radio value={'2'} key={2}>
                      轻度异常
                    </Radio>
                    <Radio value={'3'} key={3}>
                      中度异常
                    </Radio>
                    <Radio value={'4'} key={4}>
                      重度异常
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">视力</div>
                <div className="question_answer">
                  <Radio.Group value={content?.vision}>
                    <Radio value={'1'} key={1}>
                      基本正常
                    </Radio>
                    <Radio value={'2'} key={2}>
                      轻度异常
                    </Radio>
                    <Radio value={'3'} key={3}>
                      中度异常
                    </Radio>
                    <Radio value={'4'} key={4}>
                      重度异常
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">吞咽功能</div>
                <div className="question_answer">
                  <Radio.Group value={content?.swallowing}>
                    <Radio value={'1'} key={1}>
                      基本正常
                    </Radio>
                    <Radio value={'2'} key={2}>
                      轻度异常
                    </Radio>
                    <Radio value={'3'} key={3}>
                      中度异常
                    </Radio>
                    <Radio value={'4'} key={4}>
                      重度异常
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
            </div>
            <Title level={5}>基本健康状况问卷</Title>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              <div className="question_item">
                <div className="question_title1">
                  您在近1周有无法控制的高血压问题(测得血压160/100以上3次)吗？
                </div>

                <div className="question_answer1">
                  <Radio.Group value={content?.health_question_1}>
                    <Radio value={'1'} key={1}>
                      是
                    </Radio>
                    <Radio value={'0'} key={0}>
                      否
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title1">
                  你在近一个月有过反复发生的低血糖吗（出现低血糖症状≥3次）？
                </div>

                <div className="question_answer1">
                  <Radio.Group value={content?.health_question_2}>
                    <Radio value={'1'} key={1}>
                      是
                    </Radio>
                    <Radio value={'0'} key={0}>
                      否
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title1">
                  当你休息、日常活动或体育锻炼时有过胸闷、心悸、胸痛而无法继续活动甚至无法站立吗？
                </div>

                <div className="question_answer1">
                  <Radio.Group value={content?.health_question_3}>
                    <Radio value={'1'} key={1}>
                      是
                    </Radio>
                    <Radio value={'0'} key={0}>
                      否
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title1">
                  在过去12个月内，你有过失去知觉吗？有因头晕失去平衡甚至跌倒吗？
                </div>

                <div className="question_answer1">
                  <Radio.Group value={content?.health_question_4}>
                    <Radio value={'1'} key={1}>
                      是
                    </Radio>
                    <Radio value={'0'} key={0}>
                      否
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title1">你曾经被诊断为心力衰竭吗？</div>

                <div className="question_answer1">
                  <Radio.Group value={content?.health_question_5}>
                    <Radio value={'1'} key={1}>
                      是
                    </Radio>
                    <Radio value={'0'} key={0}>
                      否
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title1">
                  你有活动时或活动后骨关节明显的疼痛和不适，影响日常活动的情况吗？
                </div>

                <div className="question_answer1">
                  <Radio.Group value={content?.health_question_6}>
                    <Radio value={'1'} key={1}>
                      是
                    </Radio>
                    <Radio value={'0'} key={0}>
                      否
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title1">医生曾说过你必须在医疗监督下进行体力活动吗？</div>

                <div className="question_answer1">
                  <Radio.Group value={content?.health_question_7}>
                    <Radio value={'1'} key={1}>
                      是
                    </Radio>
                    <Radio value={'0'} key={0}>
                      否
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
            </div>
            <Title level={5}>体适能评估</Title>
            <div style={{ width: '100%', overflow: 'hidden' }}>
              <p style={{ float: 'left' }}>
                身高：<span>{content?.stature ? content.stature + 'cm' : ''}</span>
              </p>
              <p style={{ float: 'left', marginLeft: '60px' }}>
                体重：<span>{content?.weight ? content.weight + 'kg' : ''}</span>
              </p>
              <p style={{ float: 'left', marginLeft: '60px' }}>
                腰围：<span>{content?.waistline ? content.waistline + 'cm' : ''}</span>
              </p>
              <p style={{ float: 'left', marginLeft: '60px' }}>
                臀围：<span>{content?.hip ? content.hip + 'cm' : ''}</span>
              </p>
            </div>
            <div className="assess_table">
              <div className="tr fixedTHead">
                <div className="td flex1">项目</div>
                <div className="td flex2">成绩</div>
                <div className="td flex3">项目</div>
                <div className="td flex4">成绩</div>
                <div className="td flex5">项目</div>
                <div className="td flex6">成绩</div>
              </div>
              <div className="tbody" id="body1">
                <div className="tr">
                  <div className="td flex1">30秒坐站测验</div>
                  <div className="td flex2">
                    {content?.fitness_question_1 ? content.fitness_question_1 + '次' : ''}
                  </div>
                  <div className="td flex3">30秒上肢负重屈肘测验</div>
                  <div className="td flex4">
                    {content?.fitness_question_2 ? content.fitness_question_2 + '次' : ''}
                  </div>
                  <div className="td flex5">2分钟踏步测验</div>
                  <div className="td flex6">
                    {content?.fitness_question_3 ? content.fitness_question_3 + '次' : ''}
                  </div>
                </div>
                <div className="tr">
                  <div className="td flex1">座椅体前屈测验</div>
                  <div className="td flex2">
                    {content?.fitness_question_4 ? content.fitness_question_4 + 'cm' : ''}
                  </div>
                  <div className="td flex3">抓背测验</div>
                  <div className="td flex4">
                    {content?.fitness_question_5 ? content.fitness_question_5 + 'cm' : ''}
                  </div>
                  <div className="td flex5">2.4米起身绕行测验</div>
                  <div className="td flex6">
                    {content?.fitness_question_6 ? content.fitness_question_6 + '秒' : ''}
                  </div>
                </div>
              </div>
            </div>
            <Title level={5}>日常生活活动能力评估</Title>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              <div className="question_item">
                <div className="question_title">进食</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_1}>
                    <Radio value={'1'} key={1}>
                      依赖
                    </Radio>
                    <Radio value={'2'} key={2}>
                      部分需要帮助
                    </Radio>
                    <Radio value={'3'} key={3}>
                      自理
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">洗澡</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_2}>
                    <Radio value={'1'} key={1}>
                      依赖或需要帮助
                    </Radio>
                    <Radio value={'2'} key={2}>
                      自理
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">修饰</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_3}>
                    <Radio value={'1'} key={1}>
                      依赖或需要帮助
                    </Radio>
                    <Radio value={'2'} key={2}>
                      自理
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">穿衣</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_4}>
                    <Radio value={'1'} key={1}>
                      依赖
                    </Radio>
                    <Radio value={'2'} key={2}>
                      部分需要帮助
                    </Radio>
                    <Radio value={'3'} key={3}>
                      自理
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">大便控制</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_5}>
                    <Radio value={'1'} key={1}>
                      失禁
                    </Radio>
                    <Radio value={'2'} key={2}>
                      偶尔失禁
                    </Radio>
                    <Radio value={'3'} key={3}>
                      能控制
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">小便控制</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_6}>
                    <Radio value={'1'} key={1}>
                      失禁
                    </Radio>
                    <Radio value={'2'} key={2}>
                      偶尔失禁
                    </Radio>
                    <Radio value={'3'} key={3}>
                      能控制
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">如厕</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_7}>
                    <Radio value={'1'} key={1}>
                      失禁
                    </Radio>
                    <Radio value={'2'} key={2}>
                      需部分帮助
                    </Radio>
                    <Radio value={'3'} key={3}>
                      自理
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">床椅转移</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_8}>
                    <Radio value={'1'} key={1}>
                      依赖
                    </Radio>
                    <Radio value={'2'} key={2}>
                      需大量帮助
                    </Radio>
                    <Radio value={'3'} key={3}>
                      需小量帮助
                    </Radio>
                    <Radio value={'4'} key={4}>
                      自理
                    </Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">平地行走</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_9}>
                    <Radio value={'1'}>依赖</Radio>
                    <Radio value={'2'}>需大量帮助</Radio>
                    <Radio value={'3'}>需小量帮助</Radio>
                    <Radio value={'4'}>自理</Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="question_item">
                <div className="question_title">上下楼梯</div>
                <div className="question_answer">
                  <Radio.Group value={content?.daily_activities_question_10}>
                    <Radio value={'1'}>依赖</Radio>
                    <Radio value={'2'}>需要帮助</Radio>
                    <Radio value={'3'}>自理(包括使用辅助器)</Radio>
                  </Radio.Group>
                </div>
              </div>
            </div>
          </>
        )}
      </Typography>
    </Modal>
  );
};
export default OnlineCapacityInfo;
